// pages/search/search.js
import request from "../../utils/request";
let isSend = false;     //函数节流的使用
Page({

    /**
     * 页面的初始数据
     */
    data: {
        placeholderContent: '',   // placeholder的内容
        hotList: [],              // 热搜榜数据
        searchContent: '',        // 用户输入的表单项数据
        searchList: [],           // 关键字模糊匹配的数据
        historyList: [],          // 搜索历史记录
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 获取初始化数据
        this.getInitData()
        //获取本地历史记录的功能函数
        this.getSearchHistory()
    },

    /*获取初始化数据*/
    async getInitData(){
        let placeholderData = await request("/search/default");
        let hotListData = await request("/search/hot/detail");

        this.setData({
            placeholderContent:placeholderData.data.showKeyword,
            hotList:hotListData.data,
        })
    },

    /*表单项内容发生改变的回调*/
    handleInputChange(event){
        //将用户输入的最新的搜索关键字存入searchContent中
        this.setData({
            searchContent:event.detail.value.trim(),
        });
        //函数节流（防止每次输入发生改变都发起一次请求，优化搜索）
        if(isSend){
            return;
        }
        isSend = true;
        this.getSearchList();
        //通过定时器进行函数节流优化
        setTimeout(() => {
            isSend = false;
        }, 1000);
    },

    /*请求搜索数据的功能函数*/
    async getSearchList(){
        if (!this.data.searchContent){
            this.setData({
                searchList:[],
            });
            return;
        }
        let {searchContent, historyList} = this.data;
        // 发请求，获取关键字模糊匹配数据
        let searchListData =await request("/search",{keywords:searchContent, limit:10})
        this.setData({
            searchList:searchListData.result.songs,
        });
        //将搜索的关键字存入历史记录中：historyList
        if (historyList.indexOf(searchContent) !== -1){
            historyList.splice(historyList.indexOf(searchContent), 1);
        }
        historyList.unshift(searchContent);
        this.setData({
            historyList,
        });
        wx.setStorageSync('searchHistory', historyList);
    },

    //获取本地历史记录的功能函数
    getSearchHistory(){
        let historyList = wx.getStorageSync('searchHistory');

        if(historyList){
            //为了实现页面整洁，只会出现最近15条查询记录
            //为了实现页面整洁，只会出现最近15条查询记录
            if (historyList.length >15){
                this.setData({
                    historyList : historyList.slice(0,15),
                    //清空搜索的结果。
                    searchList:[]
                })
            }else {
                this.setData({
                    historyList,
                    //清空搜索的结果。
                    searchList:[],
                })
            }
        }
    },

    //清空搜索内容
    clearSearchContent(){
        this.setData({
            searchContent:[],
        })
    },

    //删除历史记录的回调
    deleteSearchHistory(){
        wx.showModal({
            title: '删除警告',
            content: '确认要删除所有记录吗？',
            success :(res) => {
                console.log("res为:",res)
                if (res.confirm) {
                    // 清空data中的historyList
                    console.log("res.confirm 为true");
                    this.setData({
                        historyList: [],
                    })
                    // 移除本地的历史记录缓存
                    wx.removeStorageSync('searchHistory')
                } else {
                    return;
                }
            }
        })
    },

    /*取消搜索的事件回调*/
    cancelSearch(){
        this.setData({
            searchList: [],
            searchContent: '',
        })
    },

    /*退出搜索*/
    exitSearch(){
        console.log("点击了退出，实现的是exitSearch ")
        wx.navigateBack({
            delta: 1
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})